Tabs for the form.

<div class="definition">
    Object, default = {}
</div>

If you define tabs then you have to define multiple pages with the form and the number of pages should be equal
to the number of tabs. Multiple pages are defined by providing multiple div tags, for example:
<textarea class="html">
<div class="w2ui-page page-0">
    <!-- fields -->
</div>
<div class="w2ui-page page-1">
    <!-- fields -->
</div>
<div class="w2ui-buttons">
    <!-- actions -->
</div>
</textarea>
If it is an object then it is a <span class="method">w2tabs</span> object definition. If it is an array then it is tabs definition that
should correspond to <span class="method">w2tabs.tabs</span> array.
<div style="height: 10px"></div>

<b>Important:</b> After the form has been initialized, <span class="method">.tabs</span> is a w2tabs object.
<div style="height: 10px"></div>

You should define tabs during object creation:
<textarea class="javascript">
let form = new w2form({
    name: 'form',
    formHTML:
        '<div class="w2ui-page page-0">'+
        '    <div class="w2ui-field">'+
        '        <label>First Name</label>'+
        '        <div>'+
        '            <input name="first_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Last Name</label>'+
        '        <div>'+
        '            <input name="last_name" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '    <div class="w2ui-field">'+
        '        <label>Email</label>'+
        '        <div>'+
        '            <input name="email" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '</div>'+
        '<div class="w2ui-page page-1">'+
        '    <div class="w2ui-field">'+
        '        <label>Other Fields</label>'+
        '        <div>'+
        '            <input name="other" type="text" maxlength="100" size="60"/>'+
        '        </div>'+
        '    </div>'+
        '</div>'+
        '<div class="w2ui-buttons">'+
        '   <button class="w2ui-btn" name="reset">Reset</button>'+
        '    <button class="w2ui-btn w2ui-btn-green" name="save">Save</button>'+
        '</div>',
    tabs: [
        { id: 'tab1', text: 'Tab 1' },
        { id: 'tab2', text: 'Tab 2' }
    ],
    fields: [
        { field: 'first_name', type: 'text', required: true },
        { field: 'last_name', type: 'text', required: true },
        { field: 'email', type: 'email' },
        { field: 'extra_field', type: 'date' }
    ],
    record: {
        first_name  : 'John',
        last_name   : 'Doe',
        email       : 'jdoe@email.com',
        extra_field : ''
    },
    actions: {
        "save": function () { this.validate(); },
        "reset": function () { this.clear(); }
    }
});
</textarea>
